<template>
  <div>
    <a-row>
      <a-col :span="24">
        <a-card :bordered="false">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :xl="6" :lg="6" :md="6" :sm="24">
                  <a-form-item label="商家名称">
                    <a-input placeholder="请输入商家名称" v-model="queryParam.name"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="6" :md="6" :sm="24">
                  <a-form-item label="手机号">
                    <a-input placeholder="请输入商家手机号" v-model="queryParam.mobile" />
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="6" :md="6" :sm="24">
                  <a-form-item label="身份证号">
                    <a-input placeholder="身份证号" v-model="queryParam.idcard" />
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="6" :md="6" :sm="24">
                  <a-form-item label="类型">
                    <j-multi-select-tag dict-code="shop_type" v-model="queryParam.type"></j-multi-select-tag>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="6" :md="6" :sm="24">
                  <a-form-item label="等级">
                    <j-dict-select-tag dict-code="merchant_grade" v-model="queryParam.grade"></j-dict-select-tag>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="6" :md="6" :sm="24">
                  <a-form-item label="状态">
                    <j-dict-select-tag dict-code="shop_audit_status" v-model="queryParam.state"></j-dict-select-tag>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="6" :md="6" :sm="24">
                  <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->
          <!-- table区域-begin -->
          <div>
            <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
              :pagination="ipagination" :loading="loading" :scroll="{ x: true }" @change="handleTableChange">
              <span slot="action" slot-scope="text, record">
                <a @click="showInfor(record)">详情</a>
                <a @click="handleEdit(record)" v-show="record.state == 0" style="margin-left: 10px">审核</a>
              </span>
            </a-table>
          </div>
          <a-modal :title="check.title" :visible="check.visibleFlag" @cancel="checkCancel" cancelText="取消" okText="确定"
            @ok="checkOk" width="600px">
            <a-form-model ref="form" :label-col="{ span: 7 }" :model="check.data" :rules="auditRules"
              :wrapper-col="{ span: 12 }">
              <a-row :gutter="24">
                <a-col :xl="24" :lg="24" :md="24" :sm="24">
                  <a-alert :message="check.message" type="warning" />
                  <a-form-model-item label="审核结果" prop="state">
                    <j-dict-select-tag dict-code="shop_audit_status" v-model="check.data.state" @change="changeState">
                    </j-dict-select-tag>
                  </a-form-model-item>
                  <a-form-model-item label="类型" prop="type">
                    <j-multi-select-tag dict-code="shop_type" v-model="check.data.type"></j-multi-select-tag>
                  </a-form-model-item>
                  <a-form-model-item label="等级" prop="grade">
                    <j-dict-select-tag dict-code="merchant_grade" v-model="check.data.grade"></j-dict-select-tag>
                  </a-form-model-item>
                  <a-form-model-item label="审核不通过的原因" prop="checkFailReason" v-show="check.data.state == -2">
                    <a-textarea placeholder="审核不通过的原因" :rows="4" v-model="check.data.checkFailReason"
                      style="resize: none"></a-textarea>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </a-modal>
        </a-card>
      </a-col>
    </a-row>
    <a-modal v-model="showMerchantInfor" title="商户信息" width="70%">
      <template slot="footer">
        <!--   审核按钮全部放开
          <a-button type="primary" v-show="merchantInfor.state == 0" @click="handleEdit(merchantInfor)"> 审核 </a-button>
        -->
        <a-button type="primary" @click="handleEdit(merchantInfor)"> 审核 </a-button>
        <a-button key="submit" type="primary" @click="showMerchantInfor=false"> 确定 </a-button>
        <a-button type="primary" @click="login"> 登录 </a-button>
      </template>
      <section class="shopInfor">
        <a-form-model :model="merchantInfor" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="商家名称" prop="name">
            <span>{{ merchantInfor.name }}</span>
          </a-form-model-item>
          <a-form-model-item label="手机号" prop="mobile">
            <span>{{ merchantInfor.mobile }}</span>
          </a-form-model-item>
          <a-form-model-item label="用户名" prop="username">
            <span>{{ merchantInfor.username }}</span>
          </a-form-model-item>
          <a-form-model-item label="身份证号" prop="idcard">
            <span>{{ merchantInfor.idcard }}</span>
          </a-form-model-item>
          <a-form-model-item label="身份证人像面" prop="frontIdcardUrl">
            <div class="this-image" @click="showThisImage(0)" v-if="merchantInfor.frontIdcardUrl">
              <img :src="merchantInfor.frontIdcardUrl" alt="" />
            </div>
          </a-form-model-item>
          <a-form-model-item label="身份证国徽面" prop="backIdcardUrl">
            <div class="this-image" @click="showThisImage(1)" v-if="merchantInfor.backIdcardUrl">
              <img :src="merchantInfor.backIdcardUrl" alt="" />
            </div>
          </a-form-model-item>
          <a-form-model-item label="手持身份证照片" prop="handHeldIdcardUrl">
            <div class="this-image" @click="showThisImage(2)" v-if="merchantInfor.handHeldIdcardUrl">
              <img :src="merchantInfor.handHeldIdcardUrl" alt="" />
            </div>
          </a-form-model-item>
          <a-form-model-item label="提现人支付宝姓名" prop="aliname">
            <span>{{ merchantInfor.aliname }}</span>
          </a-form-model-item>
          <a-form-model-item label="提现人支付宝账号" prop="alipay">
            <span>{{ merchantInfor.alipay }}</span>
          </a-form-model-item>
          <a-form-model-item label="商家类型" prop="type_dictText">
            <span>{{ merchantInfor.type_dictText }}</span>
          </a-form-model-item>
          <a-form-model-item label="商家等级" v-show="merchantInfor.state == 1" prop="grade_dictText">
            <span>{{ merchantInfor.grade_dictText }}</span>
          </a-form-model-item>
          <a-form-model-item label="状态" prop="state_dictText">
            <span>{{ merchantInfor.state_dictText }}</span>
          </a-form-model-item>
          <a-form-model-item label="审核不通过原因" v-show="merchantInfor.state == -2" prop="checkFailReason">
            <span>{{ merchantInfor.checkFailReason }}</span>
          </a-form-model-item>
          <pic-preview :filePreviewShow="imageIsShow" :currentIndex="imageIndex" :imgList="imageList" @close="close">
          </pic-preview>
        </a-form-model>
      </section>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { welcome } from "@/utils/util"
import { queryPermissionsByUser } from '@/api/api'
import {
  ACCESS_TOKEN, USER_NAME, USER_INFO, USER_AUTH, SYS_BUTTON_AUTH, UI_CACHE_DB_DICT_DATA, TENANT_ID, CACHE_INCLUDED_ROUTES, CURRENT_SHOP_INFO, SITE_INFO,
  SITE_AREA, MERCHANT_INFO, SHOP_INFO
} from "@/store/mutation-types"
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { postAction } from '../../api/manage'
import PicPreview from '@/components/PicPreview'
export default {
  name: 'MerchantList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    PicPreview,
  },
  data() {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 14 },
      description: '商家信息列表',
      showMerchantInfor: false,
      imageIsShow: false,
      merchantInfor: '',
      imageList: [],
      imageIndex: 0,
      check: {
        title: '',
        visibleFlag: false,
        message: '',
        data: {
          id: '',
          state: '',
          type: '',
          grade: '',
          checkFailReason: '',
        },
      },
      auditRules: {
        state: [{ required: true, message: '请选择审核结果', trigger: ['blur', 'change'] }, {
          pattern: /^(-)?[1-9][0-9]*$/,
          message: '请选择待审核以外的选项',
          trigger: ['change', 'blur']
        }],
        type: [{ required: true, message: '请选择商家类型', trigger: ['blur', 'change'] }],
        grade: [{ required: true, message: '请选择商家等级', trigger: ['blur', 'change'] }],
        checkFailReason: []
      },
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: '50px',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          fixed: 'left',
        },
        {
          title: '商家名称',
          align: 'center',
          dataIndex: 'name',
          width: '100px',
          fixed: 'left',
        },
        {
          title: '手机号',
          align: 'center',
          dataIndex: 'mobile',
          width: '100px',
          fixed: 'left',
        },
        {
          title: '用户名',
          align: 'center',
          dataIndex: 'username',
          width: '200px',
        },
        {
          title: '身份证号',
          align: 'center',
          dataIndex: 'idcard',
          width: '160px',
        },
        {
          title: '身份证人像面',
          align: 'center',
          dataIndex: 'frontIdcardUrl',
          width: '120px',
          customRender: (text) => {
            if (!text) return text
            const imgUrl = text
            return <img src={imgUrl} style="width:80px;height:80px;" />
          },
        },
        {
          title: '身份证国微面',
          align: 'center',
          dataIndex: 'backIdcardUrl',
          width: '120px',
          customRender: (text) => {
            if (!text) return text
            const imgUrl = text
            return <img src={imgUrl} style="width:80px;height:80px;" />
          },
        },
        {
          title: '手持身份证照片',
          align: 'center',
          dataIndex: 'handHeldIdcardUrl',
          width: '120px',
          customRender: (text) => {
            if (!text) return text
            const imgUrl = text
            return <img src={imgUrl} style="width:80px;height:80px;" />
          },
        },
        {
          title: '提现人支付宝姓名',
          align: 'center',
          dataIndex: 'aliname',
          width: '130px',
        },
        {
          title: '提现人支付宝账号',
          align: 'center',
          dataIndex: 'alipay',
          width: '130px',
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'type_dictText',
          width: '100px',
        },
        {
          title: '等级',
          align: 'center',
          dataIndex: 'grade_dictText',
          width: '100px',
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'state_dictText',
          width: '100px',
        },
        {
          title: '审核不通过的原因',
          align: 'center',
          dataIndex: 'checkFailReason',
          width: '130px',
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: '120px',
          fixed: 'right',
        },
      ],
      // 右侧表头
      url: {
        list: '/merchant/certification/merchantList',
        imgView: window._CONFIG['staticDomainURL'] + '/',
        check: '/merchant/certification/check',
        login: '/sys/toMerchantLogin',
      },
    }
  },
  created() { },
  computed: {
    // importExcelUrl: function(){
    //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    // },
  },
  methods: {
    login() {
      postAction(this.url.login + "?merchantId=" + this.merchantInfor.id).then(response => {
        console.log(response)
        if (response.code == '200') {
          const result = response.result
          const userInfo = result.userInfo
          Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
          Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
          Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
          Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 7 * 24 * 60 * 60 * 1000)
          this.$router.push({ path: '/dashboard/analysis' });
          window.location.reload()
        }
      })
    },
    changeState() {
      if (this.check.data.state == -2) {
        this.needcCause = true;
        this.auditRules.checkFailReason = [{ required: true, message: '请选择商家等级', trigger: ['blur', 'change'] }];
      } else {
        this.needcCause = false;
        this.auditRules.checkFailReason = [];
      }
    },
    handleEdit(record) {
      this.check.data.id = record.id
      this.check.title = '审核商家“' + record.name + '”提交的实名认证信息'
      this.check.message = '温馨提示：若审核结果选择“审核不通过”，请务必填写审核不通过的原因；以便于商家进行信息更正！'
      this.check.data.grade = record.grade
      this.check.data.state = record.state
      this.check.data.type = record.type
      this.check.data.checkFailReason = record.checkFailReason
      this.check.visibleFlag = true
    },
    // 隐藏图片
    close() {
      this.imageIsShow = false
    },
    // 显示图片
    showThisImage(index) {
      this.imageIsShow = true
      this.imageIndex = index
      this.imageList = [
        this.merchantInfor.frontIdcardUrl,
        this.merchantInfor.backIdcardUrl,
        this.merchantInfor.handHeldIdcardUrl,
      ]
    },
    // 显示详情
    showInfor(infor) {
      console.log(infor)
      this.merchantInfor = infor
      this.showMerchantInfor = true
    },
    checkCancel() {
      this.check.visibleFlag = false
    },
    checkOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const self = this
          postAction(self.url.check, self.check.data).then((res) => {
            if (res.success) {
              self.loadData()
              self.check.visibleFlag = false
            } else {
              self.check.message = res.message
            }
          })
        }
      });

    },
    initDictConfig() { },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.shopInfor {
  height: 65vh;
  overflow: scroll;
  box-sizing: border-box;
  overflow-x: visible;
}
.shopInfor .this-image {
  width: 200px;
  height: 200px;
}
.shopInfor .this-image img {
  width: 100%;
  height: 100%;
}
</style>